<template>
  <div class="history">
    <mt-header title="历史订单">
      <div slot="left">
        <mt-button icon="back">返回</mt-button>
      </div>
    </mt-header>
    <div class="order">
      <mt-cell title="订单编号" value="订单状态"></mt-cell>
      <div class="pic">
        <img slot="icon" src="../../assets/img/good.jpg">
      </div>
      <div class="detail">
        <mt-cell title="￥150" label="2018-03-04 12:05:24"></mt-cell>
      </div>
      <div class="operate">
        <mt-button type="primary" size="normal">查看订单</mt-button>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .history {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .order {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .pic {
    position: absolute;
    left: 0;
    width: 30%;
    height: 100%;
  }
  .pic img{
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-left: 20px;
  }
  .detail {
    position: absolute;
    left: 30%;
    width: 40%;
    height: 100%;
    margin-top: 10px;
  }
  .operate {
    position: absolute;
    left: 70%;
    width: 30%;
    height: 100%;
    margin-top: 20px;
  }
</style>
